<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="tabsBox">
			<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab" color="#000000"
				activeColor="#6D9CB3" height="50rpx" lineHeight="5rpx" lineColor="#6D9CB3" lineScale="0.4"
				bgColor="transparent" paddingItem="20rpx">
			</v-tabs>
			<scroll-view scroll-y="true" class="publishList" @scrolltolower="getMore()">
				<view class="publishItem" v-for="(item,index) in msg" :key="index">
					<view class="publishHead">
						<image :src="item.avatar" class="avatar"></image>
						<view class="publishNameBox">
							<text class="name">{{item.nickname}}</text>
							<text class="time">{{item.create_time}}</text>
						</view>
						<view class="publishVoteBox">
							<text class="voteNum">{{item.endorse_num}}</text>
							<image :src="baseurl+'project/vote.png'" class="voteIcon" v-if="item.like==0"
								@click="vote(item.id,index)"></image>
							<image :src="baseurl+'project/voted.png'" class="voteIcon" v-else></image>
							<image :src="baseurl+'project/message.png'" class="messageIcon"
								@click="reply(item.user_id,item.id)"></image>
						</view>
					</view>
					<text class="publishInfo">{{item.content}}</text>
					<view class="replyBox" v-if="item.msg_arr.length > 0" v-for="(item1,index1) in item.msg_arr"
						:key="index1">
						<view class="replyItem">
							<view class="replyItemHead">
								<image :src="item1.avatar" class="replyAvatar"></image>
								<text class="replyName">{{item1.nickname}}</text>
							</view>
							<text class="replayInfo">{{item1.content}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="menuBox" @click="showTextarea()">
			<view class="btn">
				我也要评论/提问
			</view>
		</view>
		<view class="answerBoxOuter" v-if="answerBox" @click="closeAnswerBox()">
			<view class="answerBox">
				<textarea class="textArea" maxlength="140" v-model="message" @click.stop />
				<view class="send" @click.stop="submit()">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: '精选留言',
					bgColor: 'transparent',
					color: '#000000',
				},
				tabs: ['全部'],
				content: '',
				answerBox: false,
				msg: '',
				message: '',
				id: '',
				passivity_user_id: '',
				msg_id: '',
				page: 1
			}
		},
		onLoad(options) {
			// 项目留言
			this.id = options.id;
			this.$request.get(`ProjectMsg/lists?project_id=${this.id}&page=${this.page}`).then(res => {
				console.log(res.data.data);
				this.msg = res.data.data;
			})
		},
		methods: {
			getMore() {
				this.page++;
				this.$request.get(`ProjectMsg/lists?project_id=${this.id}&page=${this.page}`).then(res => {
					this.msg.push(...res.data.data);
				})
			},
			vote(id,index) {
				this.$request.get(`projectMsg/user_endorse?msg_id=${id}`).then(res => {
					console.log(res);
					if (res.data.code > 0) {
						this.$u.toast('点赞成功');
						this.msg[index].endorse_num++;
						this.msg[index].like=1;
					} else {
						this.$u.toast(res.data.msg);
					}
					// this.$request.get(`ProjectMsg/lists?project_id=${this.id}`).then(res => {
					// 	console.log(res.data.data);
					// 	this.msg = res.data.data;
					// })
				})
			},
			handleFocus(event) {
				event.stopPropagation(); // 阻止事件冒泡
			},
			showTextarea() {
				this.answerBox = true;
			},
			closeAnswerBox() {
				this.answerBox = false;
			},
			reply(id1, id2) {
				this.answerBox = true;
				this.passivity_user_id = id1;
				this.msg_id = id2;
			},
			submit() {
				if (!this.message) {
					this.$toast({
						title: '请输入你想说的言论'
					})
					return false
				}
				this.$request.post(`ProjectMsg/user_msg`, {
					project_id: this.id,
					content: this.message,
					passivity_user_id: this.passivity_user_id,
					msg_id: this.msg_id
				}).then(res => {
					console.log(res);
					if (res.data.code > 0) { //预约成功
						this.$toast({
							title: '发送成功'
						})
						this.answerBox = false;
						this.message = '';
						this.passivity_user_id = '';
						this.msg_id = '';
					} else {
						this.$toast({
							title: '发送失败'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.answerBoxOuter {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		bottom: 0;

		.answerBox {
			position: fixed;
			width: 100%;
			height: 310rpx;
			bottom: 0;
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;

			.textArea {
				width: 686rpx;
				height: 176rpx;
				background: #D0E0E7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-top: 32rpx;
				margin-left: 32rpx;
				font-size: 28rpx;
			}

			.send {
				position: absolute;
				width: 100rpx;
				height: 56rpx;
				background: #428A9A;
				border-radius: 82rpx 82rpx 82rpx 82rpx;
				top: 136rpx;
				right: 48rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 56rpx;
				z-index: 9;
			}
		}
	}

	.menuBox {
		position: fixed;
		width: 100%;
		height: 212rpx;
		bottom: 0;
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;

		.btn {
			width: 686rpx;
			height: 80rpx;
			margin-left: 32rpx;
			margin-top: 32rpx;
			background: url('https://miantou.guguan.net/img/project/commentBg.png');
			background-size: 100% 100%;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 80rpx;
			color: #fff;
		}
	}

	.replyBox {
		width: 550rpx;
		background: #D0E0E7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 16rpx;
		margin-left: 86rpx;
		margin-top: 16rpx;

		.replyItem {
			margin-bottom: 16rpx;

			.replyItemHead {
				display: flex;
				height: 48rpx;
				align-items: center;

				.replyAvatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.replyName {
					font-size: 28rpx;
					margin-left: 10rpx;
				}
			}

			.replayInfo {
				width: 100%;
				font-size: 24rpx;
				margin-top: 16rpx;
			}

		}
	}

	.publishList {
		position: fixed;
		width: 636rpx;
		margin-top: 30rpx;
		position: relative;
		border-radius: 15rpx;
		padding: 24rpx 24rpx 60rpx 24rpx;
		background-color: #fff;
		height: 64vh;
		overflow-y: scroll;

		.publishItem {
			width: 100%;
			position: relative;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border-bottom: 2rpx solid #F5F5F5;
			padding-bottom: 24rpx;
			margin-bottom: 24rpx;

			.showAll {
				display: block;
				color: #9B9292;
				font-size: 22rpx;
				margin-top: 24rpx;
				float: right;
				margin-right: 24rpx;
			}

			.publishInfo {
				width: 550rpx;
				margin-left: 88rpx;
				margin-top: 24rpx;
				display: block;
			}

			.publishHead {
				width: 100%;
				display: flex;
				position: relative;

				.publishVoteBox {
					display: flex;
					height: 72rpx;
					position: absolute;
					right: 0;
					top: 0;
					align-items: center;

					.voteNum {
						font-size: 28rpx;
					}

					.voteIcon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}

					.messageIcon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}

				.publishNameBox {
					height: 72rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 16rpx;

					.name {
						font-size: 28rpx;
					}

					.time {
						font-size: 22rpx;
					}
				}

				.avatar {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.tabsBox {
		width: 100%;
		margin-left: 35rpx;
		margin-top: 20rpx;
		overflow-x: scroll;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		background: url('https://miantou.guguan.net/img/project/newsBg.jpg');
		background-size: 100% 100%;
	}
</style>